<template>
	<view class="user">
		<common-header :showNameContent="true">
		</common-header>
		<view class="content">
			<view class="vip">
				<view class="left">
					<text class="openvip">开通VIP</text>
					<text class="vipspace">开通VIP获得更多空间</text>
				</view>
				<view class="right">
					<text>会员中心</text>
				</view>
			</view>

			<view class="spaceAndCount">
				<view class="space">
					<view class="top">
						<text>空间</text>
						<text>60 / 120G</text>
					</view>
					<view class="bottom">
						<progress :percent="50" stroke-width="6" border-radius="100" activeColor="rgba(255, 162, 0, 1)"
							:active="true" duration="10" />
					</view>
				</view>

				<view class="count">
					<view class="top">
						<text>数量</text>
						<text>1.1 / 8万</text>
					</view>

					<view class="bottom">
						<progress :percent="50" stroke-width="6" border-radius="100" activeColor="rgba(71, 29, 224, 1)"
							:active="true" duration="10" />
					</view>
				</view>
			</view>


			<view class="optionList">
				<view class="item">
					<view class="left" @click="navigateTo">
						<uni-icons type="star" size="30"></uni-icons>
						<text>我的收藏</text>
					</view>

					<view class="right" @click="navigateTo">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="left" @click="onImgsUpload">
						<uni-icons type="cloud-upload" size="30"></uni-icons>
						<text>上传照片</text>
					</view>

					<view class="right" @click="onImgsUpload">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="left" @click="navigateToDelete">
						<uni-icons type="trash" size="30"></uni-icons>
						<text>图片回收站</text>
					</view>

					<view class="right" @click="navigateToDelete">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<uni-icons type="redo" size="30"></uni-icons>
						<text>分享</text>
					</view>

					<view class="right">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="left" @click="navigateToAboutMe">
						<uni-icons type="auth" size="30"></uni-icons>
						<text>关于我们</text>
					</view>

					<view class="right" @click="navigateToAboutMe">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script lang="ts" setup>
	const onImgsUpload = () => {
		uni.chooseImage({
			count: 9,
			sourceType: ['album'], //从相册选择
			success: (res) => {
				console.log(res)
				res.tempFilePaths.forEach((item) => {
					uni.uploadFile({
						url: "http://photo-project/file/upload",
						// header: {
						// 	Authorization: "Bearer " + this.userInfo.token,
						// },
						filePath: item,
						name: "file",
						success: function (uploadFileRes) {
							console.log('111')
							// this.picUrls = [];
							// this.picUrls.push(JSON.parse(uploadFileRes.data).data.url);
							// this.gallery = this.gallery.concat(this.picUrls);
						},
					});
				});
			},
		});
	}

	const navigateTo = () => {
		uni.navigateTo({
			url: '/pages/user/favorite'
		});
	}

	const navigateToDelete = () => {
		uni.navigateTo({
			url: '/pages/user/imageDelete'
		});
	}

	const navigateToAboutMe = () => {
		uni.navigateTo({
			url: '/pages/user/aboutMe'
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-top: 10rpx;
		padding: 0 16rpx;
		// column-count: 3;
		// column-gap: 2px;
		// border: 1px solid red;
		height: 1000rpx;
		width: 100%;
		// overflow: hidden;
		// display: flex;
		background-color: rgba(246, 246, 246, 1);

		// justify-content: center;
		// justify-items: center;
		// flex-wrap: wrap;

		.vip {
			// left: 16px;
			// top: 186px;
			margin-top: 30rpx;
			display: flex;
			width: 100%;
			height: 100px;
			opacity: 1;
			border-radius: 4px;
			// justify-content: center;
			align-items: center;
			background: linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(233, 233, 233, 1) 43.31%, rgba(233, 233, 233, 1) 46.81%, rgba(215, 215, 215, 1) 100%);

			.left {
				width: 50%;
				display: flex;
				flex-direction: column;
				// border: 1px solid red;
				padding-left: 10rpx;

				.openvip {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(27, 27, 27, 1);
					margin-bottom: 10rpx;
				}

				.vipspace {
					color: rgba(128, 128, 128, 1);
				}
			}

			.right {
				padding-right: 10rpx;
				width: 50%;
				display: flex;
				justify-content: flex-end;
				// border: 1px solid red;

				text {
					border-radius: 80rpx;
					width: 200rpx;
					align-items: center;
					height: 80rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(255, 255, 255, 1);
					background-color: rgba(48, 44, 41, 1);
				}
			}
		}


		.spaceAndCount {
			width: 100%;
			margin-top: 30rpx;
			// border: 1PX solid red;
			display: flex;

			.space {
				// border: 1PX solid black;
				width: 50%;
				display: flex;
				flex-direction: column;
				padding: 30rpx 50rpx;

				.top {
					display: flex;
					flex-direction: row;
					// padding: 50rpx;
					justify-content: space-between;

					text {
						font-weight: bold;

						&:first-child {
							color: rgba(0, 0, 0, 1);
							font-size: 32rpx;
							font-weight: bold;
							// margin-bottom: 10rpx;
						}
					}
				}

				.bottom {
					margin-top: 10rpx;
				}
			}

			.count {

				// border: 1PX solid blue;
				width: 50%;
				display: flex;
				flex-direction: column;
				padding: 30rpx 50rpx;

				.top {
					display: flex;
					flex-direction: row;
					// padding: 50rpx;
					justify-content: space-between;

					text {
						font-weight: bold;

						&:first-child {
							color: rgba(0, 0, 0, 1);
							font-size: 32rpx;
							font-weight: bold;
							// margin-bottom: 10rpx;
						}
					}
				}

				.bottom {
					margin-top: 10rpx;
				}
			}

		}

		.optionList {
			width: 100%;
			height: 750rpx;
			margin-top: 50rpx;
			// border: 1px solid red;

			.item {
				width: 100%;
				height: 100rpx;
				display: flex;
				line-height: 100rpx;
				justify-content: center;
				align-items: center;

				// border: 1px solid red;
				.shareButton {
					width: 750rpx;
					height: 100rpx;
					border: 1px solid red;
				}

				button::after {
					border: none;
				}

				.left {
					width: 50%;
					// border: 1px solid red;
					display: flex;


					text {
						// display: block;
						margin-left: 20rpx;
						font-size: 32rpx;
						font-weight: 550rpx;
					}
				}

				.right {
					width: 50%;
					display: flex;
					justify-content: flex-end;
					// border: 1px solid red;
				}
			}
		}

	}
</style>